<template>
  <div id="app" class="new">
    <!-- <div class="banners">



			<div class="heads " style="margin:  0 0 5%;">

				<div class="" style="">
					<img :src="picurl" alt="">

				</div>
			</div>
		</div> -->
    <div class="shuju">

      <div class="shujus">
        <div class="a1">
          <div class="b1">
            {{nums}}
          </div>
          <div class="b2">
            已报名
          </div>
        </div>
        <div class="a1">
          <div class="b1">
            {{huolizhi}}
          </div>
          <div class="b2">
            已投火力值
          </div>
        </div>
        <div class="a1">
          <div class="b1">
            {{reading}}
          </div>
          <div class="b2">
            浏览量
          </div>
        </div>
      </div>

    </div>
    <div class="phba1" v-if="list.length>0">
      <div class="phbb1" v-if="list[1]">
        <div class="asdd" @click="tiao(list[1].orderid)">
          <!-- <img class="imgss" :src="list[1].avatar" alt=""> -->
          <img class="head" :src="list[1].avatar" alt="">
          <img class="kuang" src="/static/img/top2.png" alt="">
          <div class="info">
            <div class="name">&nbsp;&nbsp;{{list[1].name}}</div>
            <div class="num">
              <img src="/static/img/hot2.png">
              <span>{{list[1].totalhuolizhi}}</span>
            </div>
            <div class="btn" @click="tiao(list[1].orderid)">助力</div>
          </div>
        </div>
        <!-- <div class="xms">{{list[1].name}}</div> -->
        <!-- <div class="phba1img">
					<img src="/static/image/phb2.png" alt="">
				</div> -->
        <!-- <div class="phhuoli">
          <img src="/static/image/a4.png" alt="">
          <span>{{list[1].totalhuolizhi}}</span>
        </div> -->
        <!-- <div class="phzhuli">
          <div class="txts" @click="tiao(list[1].orderid)">继续助力</div>
        </div> -->
      </div>
      <div v-else style="width:28%"></div>
      <div class="phbb2" v-if="list[0]">
        <div class="asdd" @click="tiao(list[0].orderid)">
          <!-- <img class="imgss" :src="list[0].avatar" alt=""> -->
          <img class="head" :src="list[0].avatar" alt="">
          <img class="kuang" src="/static/img/top1.png" alt="">
          <div class="info">
            <div class="name">&nbsp;&nbsp;{{list[0].name}}</div>
            <div class="num">
              <img src="/static/img/hot2.png">
              <span>{{list[0].totalhuolizhi}}</span>
            </div>
            <div class="btn" @click="tiao(list[0].orderid)">助力</div>
          </div>
        </div>
        <!-- <div class="phba1img">
          <img src="/static/image/phb1.png" alt="">
        </div> -->
        <!-- <div class="xms">{{list[0].name}}</div> -->
        <!-- <div class="phhuoli">
          <img src="/static/image/a4.png" alt="">
          <span>{{list[0].totalhuolizhi}}</span>
        </div> -->
        <!-- <div class="phzhuli">
          <div class="txts" @click="tiao(list[0].orderid)">继续助力</div>
        </div> -->
      </div>
      <div class="phbb1" v-if="list[2]">
        <div class="asdd" @click="tiao(list[2].orderid)">
          <!-- <img class="imgss" :src="list[2].avatar" alt=""> -->
          <img class="head" :src="list[2].avatar" alt="">
          <img class="kuang" src="/static/img/top3.png" alt="">
          <div class="info">
            <div class="name">&nbsp;&nbsp;{{list[2].name}}</div>
            <div class="num">
              <img src="/static/img/hot2.png">
              <span>{{list[2].totalhuolizhi}}</span>
            </div>
            <div class="btn" @click="tiao(list[2].orderid)">助力</div>
          </div>
        </div>
        <!-- <div class="phba1img">
          <img src="/static/image/phb3.png" alt="">
        </div> -->
        <!-- <div class="xms">{{list[2].name}}</div>
        <div class="phhuoli">
          <img src="/static/image/a4.png" alt="">
          <span>{{list[2].totalhuolizhi}}</span>
        </div> -->
        <!-- <div class="phzhuli">
          <div class="txts" @click="tiao(list[2].orderid)">继续助力</div>
        </div> -->
      </div>
    </div>
    <div class="yuan"></div>
    <div class="phba2">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onJiazai" :immediate-check="immediate">
        <!-- <van-col v-if="index>2" v-for="(list, index) in list" :key="index" class="phlistss clearfix" @click="tiao(list.orderid)">
          <div class="clearfix">
            <img class="phlimgss fl" :src="list.avatar" alt="">
            <div class="xinsi fl">
              <div class="names">{{list.name}}</div>
              <div class="huolis clearfix">
                <img class="fl" src="/static/image/a4.png" alt="">
                <div class="huolis fl">{{list.totalhuolizhi}}</div>
              </div>

            </div>
            <div class="jxzhuli fr" @click="tiao(list.orderid)">继续助力</div>
            <div class="xiejiao ">
              <img src="/static/image/phxiejiao.png" alt="">
              <span>{{list.paihang}}</span>
            </div>
          </div>
        </van-col> -->
        <van-col v-if="index>2" v-for="(list, index) in list" :key="index" class="phlistss clearfix" @click="tiao(list.orderid)">
          <div class="clearfix new">
            <span class="name">{{list.paihang}}</span>
            <img class="phlimgss fl" :src="list.avatar" alt="">
            <div class="info">
              <div class="names">{{list.name}}</div>
              <div class="huolis new">
                <img src="/static/img/hot3.png" alt="">
                <div class="txt">{{list.totalhuolizhi}}</div>
              </div>
            </div>
            <div class="last">
              <div class="zBtn">助力</div>
            </div>
          </div>
        </van-col>

      </van-list>
    </div>
    <div style="height: 80px; background-color: #'3b393b'"></div>
  </div>
</template>
import 'vant/lib/index.less';
<style>
.jxzhuli {
  display: inline-block;
  background-image: linear-gradient(90deg, #f2c177 0%, #b4843d 100%),
    linear-gradient(#ae7f37, #ae7f37);
  background-blend-mode: normal, normal;
  border-radius: 20px;
  color: #ffffff;
  padding: 5px 15px;
  font-size: 14px;
  margin-top: 16px;
}
.phba2 {
  /* margin: 5% 5% 0; */
  padding: 19% 5% 0;
  background-color: #3b393b;
  position: relative;
  z-index: 2;
}
.phlistss .xiejiao {
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
}
.phlistss .xiejiao span {
  position: absolute;
  top: 3px;
  left: 3px;
  color: #ffffff;
  font-size: 14px;
}
.phlistss {
  background-color: #3b393b;
  /* border-radius: 10px; */
  padding: 3% 0 3% 0;
  position: relative;
  /* margin-bottom: 5%; */
  border-bottom: 1px solid #262426;
}
.phlistss .xinsi {
  margin-left: 5%;
  padding-top: 10px;
  width: 40%;
}
.phlistss .xinsi .names {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phlistss .xinsi .huolis {
  font-size: 14px;
  color: #ae7f37;
  margin-top: 4px;

  margin-left: 5px;
}
.phlistss .xinsi .huolis img {
  width: 20px;
  height: 22.5px;
}
.phlistss .phlimgss {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.phba2 .van-list .van-col {
  float: none;
}
.phlistss.van-col {
  float: none;
}
.phzhuli {
  font-size: 14px;
  margin-top: 10px;
  text-align: center;
}

.phzhuli .txts {
  display: inline-block;
  background-image: linear-gradient(90deg, #f2c177 0%, #b4843d 100%),
    linear-gradient(#ae7f37, #ae7f37);
  background-blend-mode: normal, normal;
  border-radius: 20px;
  color: #ffffff;
  padding: 5px 15px;
}

.phhuoli {
  display: flex;
  flex-direction: row;
  justify-content: center;
  color: #ae7f37;
  margin-top: 6px;
}

.phhuoli img {
  width: 16px;
  margin-right: 2px;
}

.xms {
  text-align: center;
  color: #ffffff;
  font-size: 14px;
  padding: 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phba1 {
  padding: 5% 5% 0;
  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */
  position: relative;
  z-index: 4;
}

.phbb1 {
  width: 28%;
  padding-top: 10%;
}

.phbb2 {
  width: 40%;
}

.phba1img {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -20px;
}

.phba1img img {
  width: 32%;
}

.phbb1 .asdd {
  /* border: 4px solid #866b41; */
  border-radius: 50%;
}

.phbb1 .imgss {
  border-radius: 50%;
  width: 100%;
}

.phbb2 .asdd {
  /* border: 4px solid #866b41; */
  border-radius: 50%;
}

.phbb2 .imgss {
  border-radius: 50%;
  width: 100%;
}
</style>
<style scoped>
.new .shuju {
  background: none;
  background-color: #3b393b;
  border-radius: 15px;
}
.new .a1 .b1 {
  font-size: 18px;
  color: #fc6e20;
}
.new .a1 .b2 {
  font-size: 12px;
  color: #ffffff;
}
.shujus .a1:nth-child(2) {
  border-right: 1px dashed #999;
  border-left: 1px dashed #999;
}
.new .asdd {
  position: relative;
  /* position: relative; */
  /* background: url('/static/img/top2.png') no-repeat center;
    background-size: 100% 100%; */
}
.new .kuang {
  width: 100%;
}
.new .phbb1 .head {
  position: absolute;
  border-radius: 50%;
  width: 85%;
  top: 12%;
  left: 10%;
}
.new .phbb2 .head {
  position: absolute;
  border-radius: 50%;
  width: 85%;
  top: 9%;
  left: 10%;
}
.new .phbb1 .info {
  /* z-index: -1; */
  position: absolute;
  width: 100%;
  bottom: 10%;
  /* left: calc(50% - 34px); */
  text-align: center;
}
.new .phbb1 .info .name {
  font-size: 12px;
  color: #ffffff;
}
.new .phbb1 .info .num img {
  display: inline-block;
}
.new .phbb1 .info .num {
  width: 100%;
  font-size: 10px;
  color: #ffffff;
  margin-bottom: 5%;
}
.new .phbb1 .info .btn {
  width: 35px;
  height: 35px;
  line-height: 33px;
  font-size: 10px;
  color: #ffffff;
  background-color: #fc6e20;
  border-radius: 50%;
  margin-left: calc(50% - 15.5px);
}
/* 冠军 */
.new .phbb2 .info {
  /* z-index: -1; */
  position: absolute;
  width: 100%;
  bottom: 10%;
  text-align: center;
}
.new .phbb2 .info .name {
  font-size: 12px;
  color: #ffffff;
}
.new .phbb2 .info .num img {
  display: inline-block;
}
.new .phbb2 .info .num {
  width: 100%;
  font-size: 10px;
  color: #ffffff;
  margin-bottom: 5%;
}
.new .phbb2 .info .btn {
  width: 35px;
  height: 35px;
  line-height: 33px;
  font-size: 10px;
  color: #ffffff;
  background-color: #fc6e20;
  border-radius: 50%;
  margin-left: calc(50% - 15.5px);
}
.new .yuan {
  border: none;
  height: 60px;
  background-color: #fff;
  border-radius: 50%/0 0 100% 100%;
  background-color: #262426;
  margin-top: -40px;
  margin-bottom: -60px;
  position: relative;
  z-index: 3;
}
.new.clearfix {
  display: flex;
  align-items: center;
  color: #fff;
}
.new.clearfix .name {
  font-size: 18px;
  font-weight: 500;
}
.new.clearfix .phlimgss {
  margin-left: 20px;
}
.new.clearfix .info {
  margin-left: 20px;
}
.new.clearfix .info .names {
  font-size: 14px;
  color: #fff;
}
.new.huolis {
  display: flex;
  align-items: center;
}
.new.huolis img {
  width: 10px;
  height: 15px;
  margin-right: 5px;
}
.new.huolis .txt {
  font-size: 10px;
}
.new.clearfix .last {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.new.clearfix .zBtn {
  text-align: center;
  width: 46px;
  height: 20px;
  line-height: 20px;
  background: #fc6e20;
  border-radius: 61px 61px 61px 61px;
}
</style>
<script>
import Vue from 'vue';
import {
  Image as VanImage
} from 'vant';




import {
  Toast
} from 'vant';
import wx from 'weixin-js-sdk';
Vue.use(VanImage);

Vue.use(Toast);
export default {
  data() {
    return {
      info: [],
      images: [],
      tjlist: [],
      list: [],
      gonggao: '',
      value: '',
      immediate: false,
      loading: false,
      finished: false,
      page: 1, //请求第几页
      total: 0, //总共的数据条数
      description: '',
      content: '',
      picurl: '',
      nums: 0,
      huolizhi: 0,
      reading: 0,
      keyword: '',
      description: '',
      timer1: null,
      times: 60000
    }
  },
  components: {},
  created: function () {
    this.$emit('footer', true);
  },


  mounted() {
    //this.getShareInfo();
    this.recordapi();
    // this.timer = setInterval(() => {
    //    location.href=location
    // },30000)
    this.timer1 = setInterval(() => {
      location.href = location

    }, this.times)
  },
  // beforeDestroy(){
  //   clearInterval(this.timer);        
  //   this.timer = null;
  // },
  activated() {


    if (this.$route.meta.keepAlive) {
      this.$emit('footer', true);
    }


  },
  beforeRouteLeave(to, from, next) {
    next()
    if (this.timer1) {
      clearInterval(this.timer1)
      this.timer1 = null
    }
  },
  metaInfo() {
    const title = '排行榜'
    return {
      title,
      meta: [{
        description: this.description
      },
      {
        keywords: this.keyword
      },
      ]
    }
  },
  methods: {
    getShareInfo() {

      // 只需要传地址就好，其他后端都会写好来
      let url = location.href.split('#')[0]
      let wPath = window.document.location.href;
      let pathName = window.document.location.pathname;
      let pos = wPath.indexOf(pathName);

      // 获取主机地址，如：http://localhost:8080
      let localhostPath = wPath.substring(0, pos);
      console.log(url);
      var that = this;
      that.$api.post("/Index/jssdk", { url: url }).then(res => {
        const config = res.data;
        const huodong = res.huodong;
        wx.config({
          appId: config.appId,  // appID 公众号的唯一标识
          timestamp: config.timestamp, // 生成签名的时间戳
          nonceStr: config.nonceStr, //  生成签名的随机串
          signature: config.signature, // 生成的签名
          jsApiList: [
            'updateAppMessageShareData',
            'updateTimelineShareData',
          ]
        });
        wx.ready(() => {
          var shareData = {
            title: huodong.title,
            desc: huodong.introduction,
            link: localhostPath,
            imgUrl:
              huodong.picurl,
          };
          //点击要去分享
          wx.updateAppMessageShareData(shareData);
          wx.updateTimelineShareData(shareData);

        });
      });
    },
    tiao(e) {
      this.$router.push('Usercont?id=' + e)
      console.log(e);
    },
    urllinks(e) {
      this.$router.push(e)
      console.log(e);
    },
    onSearch(e) {

    },

    recordapi() {
      var that = this;
      that.$api.post("/Index/paihang", {
        'page': this.page
      }).then(res => {
        that.info = res.info;
        that.picurl = res.picurl;
        that.huolizhi = res.huolizhi
        that.nums = res.nums
        that.reading = res.reading
        that.keyword = res.keyword
        that.description = res.description
        let rows = res.data.data; //请求返回当页的列表
        // // console.log(that.page);
        console.log(rows)
        that.loading = false;
        that.pageSize = res.data.per_page;
        that.total = res.data.total;
        if (rows == null || rows.length === 0) {
          // 加载结束
          that.finished = true;
          return;
        }
        // 将新数据与老数据进行合并
        that.list = that.list.concat(rows);
        // //如果列表数据条数>=总条数，不再触发滚动加载
        if (that.list.length >= that.total) {
          that.finished = true;
        }
      });
    },
    // 加载
    onJiazai: function () {
      if (this.list.length > 0) {
        var that = this;
        that.page = that.page + 1;
        that.recordapi()
      }

    },
  }
}
</script>
